<template>
  <transition name="alert">
    <div
      class="sc-alert"
      :class="{
        [`sc-alert--${type}`]: type,
        [`is-${effect}`]: effect,
      }"
      v-if="showFlag"
    >
      <div class="sc-alert-icon" v-if="iconName">
        <ScIcon :icon="iconName"></ScIcon>
      </div>
      <div class="sc-alert-content">
        <slot>
          {{ content }}
        </slot>
      </div>

      <div class="sc-alert-close" v-if="closeable">
        <ScIcon icon="fa-solid fa-xmark" @click="closeFun"></ScIcon>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
export default {
  name: "ScAlert",
};
</script>
<script lang="ts" setup>
import type { AlertProps } from "./types";
import { ref } from "vue";
import ScIcon from "../theIcon/ScIcon.vue";
const showFlag = ref(true);
function closeFun() {
  showFlag.value = false;
}
withDefaults(defineProps<AlertProps>(), {
  content: "",
  type: "primary",
  closeable: true,
  effect: "light",
  iconName:''
});
</script>

<style scoped>
@import url(./style.min.css);
</style>
